.scrollArea
  position: relative
  overflow: hidden

  .scrollable
    max-height: inherit
    overflow: hidden
    zoom: 1
    will-change: scroll-position

    &.scrollX
      display: flex
      overflow-x: scroll

    &.scrollY
      overflow-y: scroll

  &.fit
    height: 100%
    width: 100%

    .scrollable
      bottom: 0
      left: 0
      max-height: none
      position: absolute
      right: 0
      top: 0

  .scrollNav
    display: flex
    justify-content: center
    align-items: center
    position: absolute
    background-color: rgba(0, 0, 0, 0.7)
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.7)
    opacity: 0
    transition: all 0.3s ease
    cursor: pointer

    svg
      width: 36px
      height: 24px

    &:hover
      background-color: rgba(0, 0, 0, 0.9)
      box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.9)

  .scrollNavUp,
  .scrollNavDown
    width: 100%
    height: 28px

  .scrollNavUp
    top: 0
    border-bottom-left-radius: 12px
    border-bottom-right-radius: 12px
    transform: translateY(-24px)

  .scrollNavDown
    bottom: 0
    border-top-left-radius: 12px
    border-top-right-radius: 12px
    transform: translateY(24px)

  .scrollNavLeft,
  .scrollNavRight
    width: 28px
    height: 100%

  .scrollNavLeft
    left: 0
    border-right-top-radius: 12px
    border-right-bottom-radius: 12px
    transform: translateX(-24px)

  .scrollNavRight
    right: 0
    border-left-top-radius: 12px
    border-left-bottom-radius: 12px
    transform: translateX(24px)

  &.canScrollUp .scrollNavUp,
  &.canScrollDown .scrollNavDown
    opacity: 1
    transform: translateY(0)

  &.canScrollLeft .scrollNavLeft,
  &.canScrollRight .scrollNavRight
    opacity: 1
    transform: translateY(0)
